import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
import { DropdownDirective, MenuItem } from '@iux/live';

@Component({
  templateUrl: './multiple-level.component.html',
  styles: [
    `
      .ui-dropdown-button {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .ui-dropdown-button lv-select-trigger-icon {
        margin-left: 8px;
      }

      ::ng-deep .lv-button.ui-dropdown-button .lv-icon-host {
        color: #808080;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MultipleLevelComponent implements OnInit {
  menus: MenuItem[];

  @ViewChild('lvDropdown', { static: false }) lvDropdown: DropdownDirective;

  ngOnInit() {
    this.menus = this.getMenus();
  }

  getMenus() {
    const data = [
      {
        id: '1',
        label: 'MenuItem 01',
        items: [
          {
            id: '11',
            label: 'MenuItem 11',
          },
          {
            id: '12',
            label: 'MenuItem 12',
          },
          {
            id: '13',
            label: 'MenuItem 13',
          },
        ],
      },
      {
        id: '2',
        label: 'MenuItem 02',
        disabled: true,
        tips: 'The program cannot be run.',
        items: [
          {
            id: '21',
            label: 'MenuItem 21',
          },
          {
            id: '22',
            label: 'MenuItem 22',
          },
        ],
      },
      {
        id: '3',
        label: 'MenuItem 03',
      },
      {
        id: '4',
        label: 'MenuItem 04',
      },
    ];
    return data;
  }

  checkPanelState(): boolean {
    const animationState = this.lvDropdown?.dropdown?._animationState;
    return animationState?.includes('show');
  }
}
